{% include vars.html %}
<!doctype html>
<html lang="{% if vars_active_language.tag %}{{vars_active_language.tag}}{% else %}en{% endif %}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, viewport-fit=cover">

    <meta property="og:url" content="{{ page.url | replace: 'index.html', '' | replace: '/lang', '' | prepend: site.baseurl | prepend: site.url }}" />
    <meta property="og:site_name" content="{{ site.title }}"/>
    <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
    <meta property="og:image" content="{{ site.url }}{{ site.baseurl }}/assets/og_image.png" />
    <meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description | strip_html | strip_newlines }}{% endif %}" />

    <title>{% if page.layout == "post" %}{{page.title}} | {{ i18n.blog_title }}{% elsif page.title %}{{page.title}} | {{ i18n.site_title }}{% elsif page.id %}{{ i18n[page.id] }} | {{ i18n.site_title }}{% else %}{{ i18n.site_title }}{% endif %}</title>
    <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ i18n.site_description }}{% endif %}">

    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
    <link rel="icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" type="image/x-icon">

    <link rel="search" href="/opensearch.xml" type="application/opensearchdescription+xml" title="Yarn">

    {% for stylesheet in page.stylesheets %}
      <link rel="stylesheet" href="{{stylesheet}}" />
    {% endfor %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}?t={{ site.time | date_to_xmlschema }}">
    <script src="https://cdn.polyfill.io/v2/polyfill.js?unknown=polyfill&excludes=Element"></script>
    <meta name="google-site-verification" content="DIcCyEkVaGHm864NWzItnt2n6Gg7hz3l47RBIRyxvcQ" />
  </head>
  <body>
    {% include debug/url.html url=page.url %}
    {% include debug/todo.html content=page.content %}

    {% include navigation.html %}
    <div id="search">
      <!-- Here to avoid flash of unstyled content on page load -->
      <div class="ais-InstantSearch-root">
        <form novalidate="" class="ais-SearchBox">
          <div role="search" class="ais-SearchBox-form"></div>
        </form>
      </div>
    </div>
    <main>{{content}}</main>
    {% include footer.html %}

    {% include i18n-as-script.html %}
    <script src="{{site.data.webpack['/js/build/vendor.js']}}"></script>
    <script src="{{site.data.webpack['/js/build/common.js']}}"></script>
    {% for script in layout.scripts %}
      <script src="{{site.data.webpack[script]}}"></script>
    {% endfor %}
    {% for script in page.scripts %}
      <script src="{{site.data.webpack[script]}}"></script>
    {% endfor %}
  </body>
</html>
